<template>
  <div class="box">
    <header class="header">
            <van-nav-bar title="日记详情" left-arrow @click-left="$router.go(-1)">
        <template #right >
          <img src="/img/icons1/icon_more1.png" alt="" @click.stop="more">
        </template>
      </van-nav-bar>
    </header>
    <div class="content">
        <!-- 图片区 -->
        <div class="img">
          <img v-for="(item,index) of imgarr" :key="index" :src="item" alt="" @click="fn1(index)">
        </div>
        <!-- 文字区 -->
        <div class="text">
          <p>今天宝宝满一岁啦，给小Kimi换尿布时、抱着他睡觉时都看到他笑了，和爸爸一样有小酒窝呢，遗传真是个厉害的学科，很多地方像我，又有很多地方像爸爸，每每看着这么一个十六斤半的爱笑的小胖纸，我无数次的想，做你的妈妈，可真幸福呀!</p>
          <span>3小时前</span>
        </div>
    </div>
    <!-- 弹框 -->
    <div class="sanjiao" v-if="this.show"></div>
    <van-popup v-model="show" class="more">
      <ul>
        <li class="van-hairline--bottom">编辑</li>
        <li class="van-hairline--bottom" @click="show = false,showShare = true">分享</li>
        <li class="van-hairline--bottom" @click="del">删除</li>
        <li class="van-hairline--bottom" @click="()=>{
          this.show=false}">取消</li>
      </ul>
    </van-popup>
    <!-- 分享弹出层 -->
    <van-share-sheet
      v-model="showShare"
      :options="options"
      cancel-text
    >
    <div slot="title" >
      <span>分享日记至</span>
      <img src="/img/icons1/icon_wrong.png" alt="" @click="showShare=false">
    </div>
    </van-share-sheet>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Toast, ImagePreview, Popup, Dialog, ShareSheet } from 'vant'
Vue.use(NavBar)
Vue.use(Dialog)
Vue.use(Popup)
Vue.use(Toast)
Vue.use(ImagePreview)
Vue.use(ShareSheet)
export default {
  data () {
    return {
      imgarr: ['img/home/note/img_1.png', 'img/home/note/img_1.png', 'img/home/note/img_1.png', 'img/home/note/img_1.png', 'img/home/note/img_1.png'],
      show: false,
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ]
      ]
    }
  },
  methods: {
    more () {
      this.show = true
    },
    del () {
      this.show = false
      Dialog.confirm({
        message: '确定删除这篇宝宝日记吗？',
        className: 'notedatail-del'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    },
    fn1 (index) { // 第一个参数为图片数组，第二个参数为开始位置
      ImagePreview({ images: this.imgarr, startPosition: index })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.box {
  // 右弹窗的三角形
  .sanjiao {
    width:0;
    height:0;
    border-width:0 10px 10px;
    border-style:solid;
    border-color:transparent transparent #fff;
    margin:40px auto;
    position: absolute;
    right: 20px;
    top: 3px;
    z-index: 2100;
  }
  // 右上角弹窗
  .more {
    top: 145px;
    left: 310px;
  }
  ul {
    width: 1.06rem;
    li {
      height: .46rem;
      line-height: .46rem;
      font-size: .14rem;
      font-family:PingFang SC;
      font-weight:bold;
      color:rgba(51,51,51,1);
      text-indent: .16rem;
    }
  }
  .header {
    @include rect(100%,.44rem);
    .van-nav-bar {// navbar样式
      background-color: #FCCE00;
      @include rect(100%,.44rem);
      /deep/.van-nav-bar__left {// 左按钮
        .van-icon {
          color: white;
          font-size: .17rem;
        }
      }
      /deep/.van-nav-bar__title{// title
        height: .44rem;
        color: #FFFFFF;
        font-size: .19rem;
        font-family:PingFang SC;
        font-weight:bold;
      }
      /deep/.van-nav-bar__right { // 右按钮
        img {
          width: .17rem;
          height: .17rem;
        }
      }
    }
  }
  .content {
    padding: 0 .22rem .22rem .235rem;
    .img {
      width: 100%;
      @include flexbox();
      @include justify-content(space-between);
      // flex-wrap: wrap;
      @include flex-wrap(wrap);
      img {
        margin-top: .1rem;
        width: 1.605rem;
        height: 1rem;
      }
    }
    .text {
      margin-top: .15rem;
      p {
        font-size:.12rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height: .24rem;
      }
      span {
        display: block;
        text-align: left;
        font-size: .22rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(102,102,102,.6);
        @include transform(scale(.5));
        // 缩放后位置发生变化，定位回到原位置
        position: absolute;
        left: 0;
      }
    }
  }
  // 分享弹出层
  /deep/.van-share-sheet__options { // 三个图标
    @include justify-content(space-around);
  }
  /deep/.van-share-sheet__header {
    height: .52rem;
    border-bottom: 1px solid rgba(102,102,102,.1);
    padding: 12px 21px 4px;
  }
  .van-share-sheet__title {
    div {
      display: flex;
      justify-content: flex-end;
    }
    img {
      width: .13rem;
      height: .13rem;
      vertical-align: middle;
      margin-left: 1.185rem;
    }
  }
}
</style>
